<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全宇支付</title>
    <link rel="shortcut icon" href="${host}/img/logo_1.png">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.4.6/theme-default/index.css">
    <style>
            .main {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: auto;
            }

            .pay_type {
                width: 80%;
                margin: auto;
            }

            .pay_type img {
                width:30px;
                height:30px;
                margin-top: 5px;
                margin-right: 7px;


            }

            .el-tabs__active-bar {
                display: none;
            }

            .el-tabs__nav {
                display: flex;


                margin: auto;
            }

            .el-tabs__nav-prev, .el-tabs__nav-next {
                display: none;

            }
            .el-tabs__item{
                width: 20%;

            }
            .el-tabs__item span{
                width: 100%;
                height:100%;
                display: flex;
                justify-content:center;
            }
            .el-tabs__nav-scroll > div {
                width: 100%;
            }
            .qrcode{
                width:200px;
                height: 200px;
                margin:10px auto;
                border: 1px solid #ccc
            }
            .el-tabs--border-card>.el-tabs__header{
                background-color: #cccccc;
            }
        </style>
</head>

<body style="background: url('${host}/img/back.png') no-repeat;'backgroundSize:cover'">
<div id="app">

    <el-row class="main" style="minWidth: 1080px;width:80%">
        <el-row style="margin:10px 0" type="flex" align="middle">
            <img src="${host}/img/logo.png"/>
            <span style="border-right: black solid 1px;height: 30px;margin-right: 20px;margin-left: 10px">&nbsp;</span>
            <span style="font-size: 18px">在线支付</span>
        </el-row>
        <el-row style="height:120px;background-color: white">
            <h3 style="padding-left: 40px">支付详情</h3>
            <el-row type="flex" justify="space-around">
                <el-col :span="6">
                    订单编号：${outOrderNo}
                </el-col>
                <el-col :span="6">
                    订单内容：${body}
                </el-col>
                <el-col :span="6">
                    支付金额：${amount} 元
                </el-col>
            </el-row>
        </el-row>
        <el-row style="margin-top:5px;background-color: #F3F3F4;height: 432px">
                    <h3 style="padding-left: 40px">付款方式</h3>

                    <el-tabs class="pay_type" type="border-card">

                        <el-tab-pane>
                            <span slot="label">
                               <img src="${host}/img/1.png" alt=""><div>支付宝支付</div>
                            </span>
                            <div class='qrcode'></div>
                            <el-row style="width: 130px;margin:10px auto;text-align: center ">
                                <el-button type="primary" @click="payMoney(1)">点击生成二维码</el-button>
                            </el-row>
                        </el-tab-pane>

                        <el-tab-pane>
                             <span slot="label">
                               <img src="${host}/img/2.png" alt=""><div>微信支付</div>
                            </span>

                            <el-row class='qrcode'></el-row>
                            <el-row style="width: 130px;margin:10px auto;text-align: center ">
                                <el-button type="primary" @click="payMoney(2)">点击生成二维码</el-button>
                            </el-row>

                        </el-tab-pane>

                        <el-tab-pane>
                                                     <span slot="label">
                                                       <img src="${host}/img/3.png" alt=""><div>快捷支付</div>
                                                    </span>

                                                    <el-row class='qrcode'></el-row>
                                                    <el-row style="width: 130px;margin:10px auto;text-align: center ">
                                                        <el-button type="primary" @click="payMoney(3)">点击生成二维码</el-button>
                                                    </el-row>

                                                </el-tab-pane>

                        <el-tab-pane>
                              <span slot="label">
                               <img src="${host}/img/4.png" alt=""><div>QQ支付</div>
                            </span>

                            <el-row class='qrcode'></el-row>
                            <el-row style="width: 130px;margin:10px auto;text-align: center ">
                                <el-button type="primary" @click="payMoney(4)">点击生成二维码</el-button>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane>
                              <span slot="label">
                               <img src="${host}/img/5.png" alt=""><div>京东支付</div>
                            </span>

                            <el-row class='qrcode'></el-row>
                            <el-row style="width: 130px;margin:10px auto;text-align: center ">
                                <el-button type="primary" @click="payMoney(5)">点击生成二维码</el-button>
                            </el-row>

                        </el-tab-pane>

                    </el-tabs>
                    </el-row>

            </el-row>

</div>
</body>
<!-- 先引入 Vue -->
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/element-ui/1.4.6/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                isShow:true,
                payType:'',
                orderId:'',
                cardNo: '',
                cardPerson: '',
                cardPhone:''
            }
        },
        methods: {
            //点击确定按钮生成二维码
            payMoney: function (mes) {
              this.isShow = false;
                this.orderId = '${orderId}';
                if (mes == 1) {
                    //支付宝支付
                    browserRedirect(function (data) {
                        if (data == '电脑') {
                            app.payType = 1;
                            app.getAjaxFun(baseUrl, app.orderId, app.payType)
                        }
                        if (data == '手机') {
                            if (typeObj[2]) {
                                app.payType = 2;
                                app.getAjaxFun(baseUrl, app.orderId, app.payType,true)
                            } else {
                                app.payType = 1;
                                app.getAjaxFun(baseUrl, app.orderId, app.payType)
                            }
                        }
                    })
                }
                if (mes == 2) {
                    //微信支付
                    browserRedirect(function (data) {
                        if (data == '电脑') {
                            app.payType = 6;
                            app.getAjaxFun(baseUrl, app.orderId, app.payType)
                        }
                        if (data == '手机') {
                            if (typeObj[6]) {
                                app.payType = 6;
                                app.getAjaxFun(baseUrl, app.orderId, app.payType)
                            } else {
                                app.payType = 7;
                                app.getAjaxFun(baseUrl, app.orderId, app.payType)
                            }
                        }
                    })

                }
                if (mes == 3) {
                                      //快捷支付
                                      browserRedirect(function (data) {
                                          if (data == '电脑') {
                                              app.payType = 5;
                                              app.getAjaxFun(baseUrl, app.orderId, app.payType)
                                          }
                                          if (data == '手机') {
                                                  app.payType = 5;
                                                  app.getAjaxFun(baseUrl, app.orderId, app.payType,true)

                                          }
                                      })

                                  }
                if (mes == 4) {
                    //QQ支付
                    browserRedirect(function (data) {
                        if (data == '电脑') {
                            app.payType = 4;
                            app.getAjaxFun(baseUrl, app.orderId, app.payType)
                        }
                        if (data == '手机') {
                            app.payType = 4;
                            app.getAjaxFun(baseUrl, app.orderId, app.payType)

                        }
                    })
                }
                if (mes == 5) {
                     browserRedirect(function (data) {
                                                              if (data == '电脑') {
                                                                  app.payType = 3;
                                                                  app.getAjaxFun(baseUrl, app.orderId, app.payType)
                                                              }
                                                              if (data == '手机') {
                                                                      app.payType = 3;
                                                                      app.getAjaxFun(baseUrl, app.orderId, app.payType,true)

                                                              }
                                                          })
                }
            },
            getAjaxFun: function (baseUrl, orderId, payType,isOpen) {
                var params = {
                    orderId: orderId,
                    payType: payType
                }
                getJqueryAjax(baseUrl, params, function (data) {
                    if (data.respCode == 1) {
                        if(isOpen){
                            location.href = data.body
                            return;
                        }
                        qrcodeUrl(data.body);
                        app.$message({
                            type: 'success',
                            message: '二维码生成成功'
                        })
                    } else {
                        app.$message({
                            type: 'error',
                            message: '二维码生成失败'
                        })
                    }
                })
            }
        }
    })
</script>
<script>
    var baseUrl = '${host}/pay';

    var typeObj = {
    					1: ${a1},
    					2: ${a2},
    					3: ${a3},
    					4: ${a4},
    					5: ${a5},
    					6: ${a6},
    					7: ${a7}

    				};
    //判断是否能用支付宝支付
    if(!typeObj[1] && !typeObj[2]) {
        $(".el-tabs__item:eq(0)").css("display", "none")
    } else {
        $(".el-tabs__item:eq(0)").css("display", "block")
    }
    //判断是否能用京东支付
    if(!typeObj[3]) {
        $(".el-tabs__item:eq(4)").css("display", "none")
    } else {
        $(".el-tabs__item:eq(4)").css("display", "block")
    }

    //判断是否能用qq支付
    if(!typeObj[4]) {
        $(".el-tabs__item:eq(3)").css("display", "none")
    } else {
        $(".el-tabs__item:eq(3)").css("display", "block")
    }

    //判断是否能用快捷支付
    if(!typeObj[5]) {
        $(".el-tabs__item:eq(2)").css("display", "none")
    } else {
        $(".el-tabs__item:eq(2)").css("display", "block")
    }
    //判断是否能用q京东支付
    if(!typeObj[6] && !typeObj[7]) {
        $(".el-tabs__item:eq(1)").css("display", "none")
    } else {
        $(".el-tabs__item:eq(1)").css("display", "block")
    }

    //把url转化为二维码
    function qrcodeUrl(url) {
        $(".qrcode").html('');
        $(".qrcode").qrcode({
            render: "canvas", // 渲染方式有table方式和canvas方式
            width: 200, //默认宽度
            height: 200, //默认高度
            text: url, //二维码内容
            typeNumber: -1, //计算模式一般默认为-1
            correctLevel: 2, //二维码纠错级别
            background: "#ffffff", //背景颜色
            foreground: "#000000" //二维码颜色

        })
    }

    //jquery的ajax请求

    function getJqueryAjax(url, params, success) {

        $.ajax({
            type: "post",
            url: url,
            data: params,
            dataType: "json",
            beforeSend: function (xhr) {
            },
            success: function (data) {
                success(data)
            },
            error: function (err) {
            },
            async: true

        });

    }

    /**
     * 判断登录状态为手机或者电脑
     */
    function browserRedirect(success) {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            success("手机")
        } else {
            success("电脑")
        }
    }

</script>
</html>